<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" type="image/x-icon" th:href="@{/img/favicon.ico}">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>登录</title>

    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <script th:src="@{/js/popper.js}"></script>
    <script th:src="@{/js/toolkit.js}"></script>
    <script th:src="@{/js/component.js}"></script>
    <script th:src="@{/js/antd.js}"></script>

    <link th:href="@{/css/antd.css}" rel="stylesheet">
    <link th:href="@{/css/toolkit-light.css}" rel="stylesheet">

    <style>
        .up {
            z-index: 10;
        }

        .card-img-top {
            width: 15%;
            border-top-left-radius: calc(0.25rem - 1px);
            border-top-right-radius: calc(0.25rem - 1px);
        }

        .ant-divider-dev {
            background: linear-gradient(to right, rgba(255,255,255,0.5), rgba(255,255,255,0));
        }

        .icon-local {
            height: 48px;
            width: 48px;
        }

        .top_right {
            margin-top: 8px;
            margin-left: 15px;
            color: white;
        }

        h4 {
            color: white;
        }

        .white {
            color: white;
        }

        .goRight {
            margin-left: 15px;
        }
    </style>
</head>
<body th:style="'background:url('+@{/img/login-bg.jpg}+'); background-size:auto 100%; background-repeat:no-repeat;'">
<div class="container">
    <!--logo-->
    <div class="col-md-11">
        <img th:src="@{/img/ahza-white-oj.png}" class="card-img-top">
    </div>
    <!--分割线-->
    <div class="ant-divider ant-divider-horizontal col-md-8 ant-divider-dev">
        <h3 class="hr-divider-content hr-divider-heading"></h3>
    </div>
    <div class="row">
        <!--介绍-->
        <div class="col-md-7 goRight">
            <div class="row inline-block">
                <img class="ant-col-md-1 icon-local" src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/login-regist/css/img/event/icon.svg"/>
                <h2 class="ant-col-md-21 top_right">在线测试系统-前台</h2>
            </div>
            <div class="ant-col-md-offset-1">
                <div>
                    <span class="white icon icon-check col-md-1"></span>
                    <h4>功能简便易用</h4>
                </div>
                <div>
                    <span class="white icon icon-check col-md-1"></span>
                    <h4>经过优化的知识测验解决方案</h4>
                </div>
            </div>
        </div>
        <!--登录面板-->
        <div class="panel panel-default col-md-4">
            <div class="col-md-offset-1">
                <h3 class="up input-group">用户名密码登录</h3>
                <form action="/authentication/form" method="post">
                    <div class="row">
                        <div class="input-group form-group input-with-icon col-md-11">
                            <input class="form-control" type="text" id="username" name="username" placeholder="请输入邮箱地址">
                            <span class="up icon icon-email"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group form-group input-with-icon col-md-11">
                            <input class="form-control" type="password" id="password" name="password" placeholder="请输入密码">
                            <span class="up icon icon-lock"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group form-group col-md-12 col-sm-12">
                            <button type="submit" class="col-md-11 col-sm-11 btn btn-primary">登录</button>
                        </div>
                    </div>

                    <div class="ant-divider ant-divider-horizontal col-md-11">
                        <h3 class="hr-divider-content hr-divider-heading"></h3>
                    </div>
                </form>
                <div class="row">
                    <p class="col-md-12 text-center">还没有注册账号？</p>
                    <div class="input-group form-group col-md-12 col-sm-12">
                        <button onclick="window.location.href='/register'" class="col-md-11 col-sm-11 btn btn-primary-outline">立即注册</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>